<template>
	<view class="">
		<view>
			<view style="width: 100%;height: 80rpx;padding: 20rpx;font-size: 28rpx;">
				<view class="switchSave" style="background-color: #ffcefb;" @click="changeSwitch" >小动物</view>
				<view class="switchSave" style="border-radius: 0 50rpx 50rpx 0;background-color: #ff509d;">领养期望</view>
			</view>
			<view style="padding: 0 20rpx;">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="formData" :rules="rules">
					<uni-forms-item label="标题" required name="title">
						<uni-easyinput v-model="formData.title" placeholder="请输入标题" />
					</uni-forms-item>
					<uni-forms-item label="封面" required>
						<view style="margin: 30rpx;">
							<uni-file-picker limit="1" auto-upload="true" @select="uploadFile"
								v-model="selectImage"></uni-file-picker>
						</view>
					</uni-forms-item>
					<uni-forms-item label="联系方式" required name="phone">
						<uni-easyinput v-model="formData.phone" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="地址" required>
						<picker mode="multiSelector" :range="regionList" range-key="regionName" @change="changeRegion"
							@columnchange="regionColumnChange">{{region}} ▼</picker>
					</uni-forms-item>
					<uni-forms-item label="详细地址" required name="detailAddress">
						<uni-easyinput v-model="formData.detailAddress" placeholder="请输入详细地址" />
					</uni-forms-item>
					<uni-forms-item label="详细描述" name="desc">
						<uni-easyinput type="textarea" v-model="formData.desc" placeholder="请输入详细描述" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit()">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		baseUrl
	} from '../../static/js/common';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const formData = ref({})
	const type = ref(1)
	const activeColor = '#ff509d'
	const hidderColor = '#ffcefb'
	let imageId = ''
	let selectImage = ref([])
	const baseForm = ref()
	const region = ref('东城区')
	const regionList = ref([])
	let regionId = [1000000, 1000034, 0]

	function changeSwitch() {
		uni.switchTab({
			url: '/pages/add/add'
		})
	}


	function uploadFile(e) {
		let token = localStorage.getItem("token")
		// console.log(e)
		uni.uploadFile({
			url: baseUrl + "/image/uploadImage",
			method: 'POST',
			name: "file",
			header: {
				'Authorization': token
			},
			filePath: e.tempFilePaths[0],
			success: res => {
				imageId = JSON.parse(res.data).data
			},
			fail(f) {
				console.log(f)
			}
		})

	}

	function changeRegion(e) {
		if (regionList.value[2].length === 0) {
			region.value = regionList.value[1][e.detail.value[1]].regionName
		} else {
			region.value = regionList.value[2][e.detail.value[2]].regionName
		}

	}

	function regionColumnChange(e) {
		let column = e.detail.column
		let index = e.detail.value
		let regionInfo = regionList.value[column][index]
		if (regionInfo != null) {
			regionId[column] = regionInfo.regionId
			console.log(regionId)
			requestColumn(column, regionInfo.regionId)
		}

	}

	function requestColumn(column, regionId) {
		if (column < 2) {
			uni.request({
				url: baseUrl + '/region/column',
				data: {
					regionId
				},
				success: (res) => {
					regionList.value[column + 1] = res.data.data
				}
			})
		}
	}

	function requestRegion() {
		let params = {

		}
		uni.request({
			url: baseUrl + '/region/list',
			data: params,
			success: (res) => {
				regionList.value = [...res.data.data.lists]
				let e = {
					detail: {
						value: [0, 0, 0]
					}
				}
				changeRegion(e)
			}
		})
	}

	onShow(() => {
		if (localStorage.getItem("token") == null || localStorage.getItem("userInfo") == null) {
			uni.showModal({
				title: '提示',
				content: '请先登录才能发布',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				}
			});

		}
		requestRegion()
	})

	function submit() {
		baseForm.value.validate().then((res) => {
			res.imageId = imageId;
			res.regionId = regionId
			//其他操作
			let token = localStorage.getItem("token")
			let userInfo=JSON.parse(localStorage.getItem("userInfo"))
			res.userId=userInfo.id;
			uni.request({
				url: baseUrl + '/post/addOrUpdate',
				data: res,
				method: 'POST',
				header: {
					'Authorization': token
				},
				success: (res) => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '提示',
							content: '发布成功',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/adopt/adopt'
									})
								}
								baseForm.value.reset()
							}
						});

					} else {
						uni.showToast({
							icon: 'error',
							title: '发布失败，请检查网络'
						})
					}
				}
			})
		})
	}


	const rules = ref({
		// 对name字段进行必填验证
		title: {
			rules: [{
				required: true,
				errorMessage: '请输入标题',
				trigger: 'blur',
			}]
		},
		phone: {
			rules: [{
				required: true,
				format: 'phone',
				errorMessage: '请输入正确的电话号码',
				trigger: 'blur',
			}]
		}
	})
</script>

<style lang="scss" scoped>
	.switchSave {
		float: left;
		width: 150rpx;
		text-align: center;
		border-radius: 50rpx 0 0 50rpx;
		height: 70rpx;
		color: aliceblue;
		line-height: 70rpx;
	}

	.uni-switch-input {
		background-color: red;
	}

	.uni-switch-input {
		background-color: red;
	}
</style>